<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对比工具</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="common.css">
    <script>
        // 防止主题闪烁 - 在页面渲染前应用主题
        (function() {
            const theme = localStorage.getItem('global-theme') || 'dark';
            if (theme === 'dark') {
                document.documentElement.classList.add('dark-theme');
            }
        })();
    </script>
    <link rel="stylesheet" href="text-comparator.css">
    <link rel="stylesheet" href="paste-button.css">
</head>
<body>
    <div style="display: flex; height: 100vh;">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>工具库</h2>
                <button class="theme-toggle-btn" id="globalThemeToggle" title="切换主题" aria-label="切换浅色/深色主题">
                    <span class="theme-icon">🌓</span>
                </button>
            </div>
            <div class="sidebar-item" onclick="location.href='index.html'">JSON 格式化</div>
            <div class="sidebar-item" onclick="location.href='json-comparator.html'">JSON 对比</div>
            <div class="sidebar-item active" onclick="location.href='text-comparator.html'">文本对比</div>
            <div class="sidebar-item" onclick="location.href='url-codec.html'">URL 编解码</div>
            <div class="sidebar-item" onclick="location.href='text-decoder.html'">文本解码</div>
            <div class="sidebar-item" onclick="location.href='datetime-converter.html'">日期时间转换</div>
            <div class="sidebar-item" onclick="location.href='md5-hash.html'">加解密</div>
            <div class="sidebar-item" onclick="location.href='ck-extractor.html'">CK 提取</div>
            <div style="margin-top: auto; padding: 15px 20px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color); text-align: center;">
                版本: v1.0.1
            </div>
        </div>
        <div class="main-content">
            <div class="text-comparator">
                <!-- 对比结果区域 -->
                <div class="diff-display-container" id="diffDisplayContainer">
                    <div class="diff-header">
                        <div class="diff-column-header">
                            <div class="diff-toolbar-actions">
                                <span class="diff-label">原始文本</span>
                                <div class="diff-stats" id="originalStats"></div>
                            </div>
                            <div class="diff-toolbar-actions" style="justify-content: flex-end;">
                                <button class="btn-secondary merge-to-changed" id="mergeAllToModified" title="将所有原始文本合并到修改后文本">
                                    合并所有 →
                                </button>
                            </div>
                        </div>
                        <div class="diff-column-header">
                            <div class="diff-toolbar-actions">
                                <button class="btn-secondary merge-to-original" id="mergeAllToOriginal" title="将所有修改后文本合并到原始文本">
                                    ← 合并所有
                                </button>
                            </div>
                            <div class="diff-toolbar-actions" style="justify-content: flex-end; padding-right: 10px;">
                                <span class="diff-label">修改后文本</span>
                                <div class="diff-stats" id="modifiedStats"></div>
                            </div>
                        </div>
                    </div>
                    <div class="diff-content-wrapper">
                        <div class="diff-column diff-original" id="diffOriginal"></div>
                        <div class="diff-column diff-modified" id="diffModified"></div>
                    </div>
                </div>

                <!-- 编辑器区域 -->
                <div class="editors-container">
                    <!-- 左侧：原始文本编辑器 -->
                    <div class="text-input-section">
                        <div class="section-header">
                            <h1>原始文本</h1>
                            <div class="actions">
                                <button class="btn-secondary" id="clearOriginalText" aria-label="清空原始文本">清空</button>
                                <div class="sort-dropdown-container">
                                    <button class="btn-secondary sort-btn" id="sortOriginalText" title="对文本行进行排序" aria-label="排序原始文本">
                                        <span>排序</span>
                                        <span class="dropdown-arrow">▼</span>
                                    </button>
                                    <div class="sort-dropdown-menu" id="sortOriginalMenu">
                                        <div class="sort-option" data-type="asc" data-target="original">升序 (A → Z)</div>
                                        <div class="sort-option" data-type="desc" data-target="original">降序 (Z → A)</div>
                                    </div>
                                </div>
                                <button class="btn-secondary" id="importFileOriginal" aria-label="导入文件到原始文本">导入文件</button>
                                <button class="btn-secondary" id="exportOriginalText" aria-label="导出原始文本">导出文件</button>
                                <button class="btn-secondary" id="copyOriginalText" aria-label="复制原始文本">复制</button>
                                <button class="btn-paste" id="pasteOriginalBtn" title="从剪贴板粘贴" aria-label="从剪贴板粘贴到原始文本">粘贴</button>
                            </div>
                        </div>
                        <textarea class="input-editor" id="originalTextEditor" placeholder="粘贴或输入原始文本..." aria-label="原始文本编辑器"></textarea>
                    </div>
                    
                    <!-- 右侧：修改后文本编辑器 -->
                    <div class="text-output-section">
                        <div class="section-header">
                            <h1>修改后文本</h1>
                            <div class="actions">
                                <button class="btn-secondary" id="clearModifiedText" aria-label="清空修改后文本">清空</button>
                                <div class="sort-dropdown-container">
                                    <button class="btn-secondary sort-btn" id="sortModifiedText" title="对文本行进行排序" aria-label="排序修改后文本">
                                        <span>排序</span>
                                        <span class="dropdown-arrow">▼</span>
                                    </button>
                                    <div class="sort-dropdown-menu" id="sortModifiedMenu">
                                        <div class="sort-option" data-type="asc" data-target="modified">升序 (A → Z)</div>
                                        <div class="sort-option" data-type="desc" data-target="modified">降序 (Z → A)</div>
                                    </div>
                                </div>
                                <button class="btn-secondary" id="importFileModified" aria-label="导入文件到修改后文本">导入文件</button>
                                <button class="btn-secondary" id="exportModifiedText" aria-label="导出修改后文本">导出文件</button>
                                <button class="btn-secondary" id="copyModifiedText" aria-label="复制修改后文本">复制</button>
                                <button class="btn-paste" id="pasteModifiedBtn" title="从剪贴板粘贴" aria-label="从剪贴板粘贴到修改后文本">粘贴</button>
                                <button class="btn-primary" id="textDiffBtn" aria-label="对比文本">对比</button>
                            </div>
                        </div>
                        <textarea class="input-editor" id="modifiedTextEditor" placeholder="粘贴或输入修改后文本..." aria-label="修改后文本编辑器"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="theme-toggle.js"></script>
    <script src="comparator-common.js"></script>
    <script src="paste-button.js"></script>
    <script src="text-comparator.js"></script>
    <script>
        // 初始化粘贴按钮
        document.addEventListener('DOMContentLoaded', () => {
            // 原始文本粘贴按钮
            document.getElementById('pasteOriginalBtn').addEventListener('click', async () => {
                await PasteButton.paste('originalTextEditor');
            });

            // 修改后文本粘贴按钮
            document.getElementById('pasteModifiedBtn').addEventListener('click', async () => {
                await PasteButton.paste('modifiedTextEditor');
            });
        });
    </script>
</body>
</html>
